<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">登录</view>
			</block>
		</cu-custom>
		<view class="padding-top-48 padding-left-32 padding-right-32">
			<view class="flex align-center justify-between">
				<view>
					<view class="selLogin-top-text">GREEN</view>
					<view class="selLogin-top-text">PASSPORT</view>
				</view>
				<view>
					<image src="https://txr001.zthj.net/static/img/login.png" class="login-logo"></image>
				</view>
			</view>
			<view class="padding-top-16 ">
				<text class="text-0101 text-bold-600 text-64">青牒碳账户</text>
				<text class="padding-left-16 padding-right-24 text-64"> | </text>
				<text class="text-0101 text-bold-600 text-64">登录</text>
			</view>
			<view class="padding-top-16 text-0101 text-sm">欢迎您开启青牒碳账户</view>
		</view>
		<view class="footer">
			<!-- <view class="text-center">
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange" shape="circle" v-model="isAgree"></u-checkbox>
				</u-checkbox-group> -->
				<!-- <image src="https://txr001.zthj.net/static/img/uncheck.png" class="uncheck-img-class"></image> -->
			<!-- 	<text class=" text-black text-sm">登录代表您已同意青牒</text>
				<text class="text-24458e text-sm">《服务条款》《隐私协议》</text>
			</view> -->
			<view class="text-center" @click="check=!check">
				<image :src="check?'https://txr001.zthj.net/static/img/check.png':'https://txr001.zthj.net/static/img/uncheck.png'" class="uncheck-img-class margin-right-sm"></image>
				<text class=" text-black text-sm">登录代表您已同意青牒</text>
				<text class="text-24458e text-sm">《服务条款》《隐私协议》</text>
			</view>
			<button class="cu-btn wx-btn" @click="goThreeLogin">微信用户一键登录</button>
			<button class="cu-btn phone-btn" @click="mobileLogin">手机号登录/注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// isAgree: false,
				check:false
			}
		},
		methods: {
			// checkboxChange: function(e) {
				// this.isAgree = e.value;
				// console.log(e);
			// },
			goThreeLogin: async function() {
				let that = this;
				if (!that.check) {
					uni.showModal({
						title: '提醒',
						content: '是否同意青牒《服务条款》和《隐私协议》？',
						success: function(res) {
							if (res.confirm) {
								that.check = true;
								// return;
							} else if (res.cancel) {
								// return;
								// console.log('用户点击取消');
							}
						}
					});
				} else {
					// #ifdef MP-WEIXIN
					that.$u.route('/pages/login/wxlogins?index=3');
					// #endif

					// #ifdef H5
					that.goAuth();
					// #endif

					// #ifdef APP-PLUS
					that.goAppLogin(2);
					// #endif
				}
			},
			mobileLogin: function() {
				let that = this;
				if (!that.check) {
					uni.showModal({
						title: '提醒',
						content: '是否同意青牒《服务条款》和《隐私协议》？',
						success: function(res) {
							if (res.confirm) {
								that.check = true;
								// return;
							} else if (res.cancel) {
								// return;
								// console.log('用户点击取消');
							}
						}
					});
				} else {
					that.goPage('/pages/login/login');
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped>
	.selLogin-top-text {
		font-size: 40rpx;
		font-weight: 400;
		color: #010101;
	}

	.login-logo {
		width: 48rpx;
		height: 68rpx;
	}

	.uncheck-img-class {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.wx-btn {
		height: 88rpx;
		line-height: 88rpx;
		background: #24458E;
		border-radius: 32rpx;
		width: 100%;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 48rpx;
	}

	.phone-btn {
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 32rpx;
		border: 2rpx solid #010101;
		background-color: #fff;
		width: 100%;
		font-size: 32rpx;
		font-weight: 400;
		color: #010101;
		margin-top: 48rpx;
	}

	.footer {
		padding: 0 32rpx;
		width: 100%;
		position: fixed;
		bottom: 96rpx;
		left: 0;
	}
</style>